import React, { useEffect, useState } from 'react';
import Header from '../../components/liu/header'
import { useNavigate, useLocation, NavLink } from 'react-router-dom'
import '../../styles/liu/serverDetail.scss'
import { Button, Form, Input, Col, message, Modal } from 'antd';
import { setServerList } from '../../api/liu/index'
interface Props {

}
function ServeDetail(props: Props) {
    const [messageApi, contextHolder] = message.useMessage();
    const { TextArea } = Input;
    var navigate = useNavigate()
    var location = useLocation()
    const [form] = Form.useForm()
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isModalOpen2, setIsModalOpen2] = useState(false);
    const [istext, setIstext] = useState("")

    //挂载期获取回显数据
    useEffect(() => {
        form.setFieldsValue(location.state)
    }, [])

    //点击审核弹出对话框
    const showModal = () => {
        setIstext("审核确认")
        setIsModalOpen(true);
    };
    //点击确认
    const handleOk = async () => {
        if (istext == "审核确认") {
            var res = await setServerList({ ...location.state, "signPending": "待服务","auditor": "李明明" ,"auditorTime":new Date()})
            if (res.status == 200) {
                messageApi.open({
                    type: 'success',
                    content: '确认成功',
                });
                location.state.signPending = "待服务"
                setIsModalOpen(false);
            }
        } else if (istext == "驳回确认") { 
            var res = await setServerList({ ...location.state, "signPending": "已驳回", "auditor": "李明明" })
            if (res.status == 200) {
                messageApi.open({
                    type: 'success',
                    content: '已驳回',
                });
                location.state.signPending = "已驳回"
                setIsModalOpen(false);
            }
        } else if (istext == "取消预约服务确认") {
            var res = await setServerList({ ...location.state, "signPending": "已取消", "auditor": "李明明","cancelTime":new Date() ,"cancelTxt":""})
            if (res.status == 200) {
                messageApi.open({
                    type: 'success',
                    content: '取消成功',
                });
                location.state.signPending = "已取消"
                setIsModalOpen(false);
            }
        }
    };
    //健康随访信息确认
    const onFinish = async (values: any) => {
        var res = await setServerList({ ...location.state, "signPending": "已完成", "auditor": "李明明","healthInfo":{...values},"finishTime":new Date() })
        if (res.status == 200) {
            messageApi.open({
                type: 'success',
                content: '已完成',
            });
            location.state.signPending = "已完成"
            setIsModalOpen2(false);
        }
    }
    //点击取消
    const handleCancel = () => {
        setIsModalOpen(false);
        setIsModalOpen2(false);
    };
    //点击驳回
    var clickRejsct = () => {
        setIstext("驳回确认")
        setIsModalOpen(true);
    }
    //点击完成服务
    var services = () => {
        setIsModalOpen2(true);
    }
    //点击取消预约
    var noOrder = () => {
        setIstext("取消预约服务确认")
        setIsModalOpen(true);
    }
    return (
        <div className='servedetail'>
            {contextHolder}
            <div className="main">
                <Header txt='服务详情'></Header>
                <div className="resident">
                    <h4>居民信息</h4>
                    <div className="inputbox">
                        <Form
                            name="basic"
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                            layout="inline"
                            form={form}
                        >

                            <Col span={8}>
                                <Form.Item
                                    label="姓名"
                                    name="name"

                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} style={{ color: "#2984f8" }} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="身份证号"
                                    name="id-num"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>


                            <Col span={8}>
                                <Form.Item
                                    label="性别"
                                    name="sex"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="出生年月"
                                    name="born"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="联系电话"
                                    name="phone"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="现居地"
                                    name="city"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="居民标签"
                                    name="tags"
                                >
                                    <span >{location.state.tags}</span>
                                </Form.Item>
                            </Col>

                            <Col span={16}></Col>


                            <Col span={24}><h4>签约信息</h4></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务编号"
                                    name="id"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务状态"
                                    name="signPending"
                                >
                                    <Input bordered={false} style={{ color: "#3DD4A7" }} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务机构"
                                    name="organization"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务团队"
                                    name="serverTeam"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务医生"
                                    name="doctor"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务包"
                                    name="server"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务项目"
                                    name="serverTypes"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务来源"
                                    name="serverSource"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务地点"
                                    name="serverPlace"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="预约时间"
                                    name="orderTime"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="提交时间"
                                    name="submitTime"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>
                            <Col span={24}></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务备注"
                                    name="comment"
                                >
                                    <span>{location.state.comment == "" ? "无" : location.state.comment}</span>
                                </Form.Item>
                            </Col>

                            <Col span={24}>
                                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                    {
                                        location.state.signPending == "待审核" ?
                                            <>
                                                <NavLink to="/index/serve-edit" state={location.state}><Button type="primary">编辑服务信息</Button></NavLink>
                                                <Button type="primary" style={{ background: "#3DD4A7" }} onClick={() => { showModal() }}>审核通过</Button>
                                                <Button type="primary" danger onClick={clickRejsct}>驳回</Button>
                                                <Button onClick={() => { navigate(-1) }}>返回</Button>
                                            </> : ""
                                    }
                                    {
                                        location.state.signPending == "待服务" ?
                                            <>
                                                <NavLink to="/index/serve-edit" state={location.state}><Button type="primary">编辑服务信息</Button></NavLink>
                                                <Button type="primary" style={{ background: "#3DD4A7" }} onClick={services}>完成服务</Button>
                                                <Button type="primary" danger onClick={noOrder}>取消预约</Button>
                                                <Button onClick={() => { navigate(-1) }}>返回</Button>
                                            </> : ""
                                    }
                                    {
                                        location.state.signPending == "已驳回" ?
                                            <Button onClick={() => { navigate(-1) }}>返回</Button> : ""
                                    }
                                    {
                                        location.state.signPending == "已取消" ?
                                            <Button onClick={() => { navigate(-1) }}>返回</Button> : ""
                                    }
                                    {
                                        location.state.signPending == "已完成" ?
                                            <Button onClick={() => { navigate(-1) }}>返回</Button> : ""
                                    }

                                </Form.Item>
                            </Col>
                        </Form>
                    </div>
                </div>

                <Modal title={istext} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText="确定" cancelText="取消">
                    {istext == "审核确认" ? <p>确定要审核通过吗?</p> : ""}
                    {istext == "驳回确认" ? <TextArea rows={4} placeholder="请输入驳回原因..." maxLength={6} /> : ""}
                    {istext == "取消预约服务确认" ? <TextArea rows={4} placeholder="请输入取消原因..." maxLength={6} /> : ""}
                </Modal>

                <Modal title="健康随访信息" open={isModalOpen2} footer={null}>
                    <Form
                        name="basic"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 16 }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="血压"
                            name="血压"
                            rules={[{ required: true, message: '请输入' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="空腹血糖"
                            name="空腹血糖"
                            rules={[{ required: true, message: '请输入' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="心率"
                            name="心率"
                            rules={[{ required: true, message: '请输入' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="病情描述"
                            name="病情描述"
                            rules={[{ required: true, message: '请输入' }]}
                        >
                            <Input.TextArea showCount maxLength={100} />
                        </Form.Item>

                        <Form.Item
                            label="健康指导"
                            name="健康指导"
                            rules={[{ required: true, message: '请输入' }]}
                        >
                            <Input.TextArea showCount maxLength={100} />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit" style={{margin:"0 5px"}}>提交</Button>
                            <Button onClick={()=>{setIsModalOpen2(false)}}>取消</Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </div>
    );
}

export default ServeDetail;